import React, { useState, useRef, useEffect } from 'react';
import { Modal, Form, Descriptions } from 'antd';
import type { DraggableData, DraggableEvent } from 'react-draggable';
import Draggable from 'react-draggable';

interface IProps {
  isModalOpen?: boolean;
  handleOk: () => void;
  handleCancel: () => void;
  tableRecord?: any;
}

const OperationDetails: React.FC<IProps> = (props) => {
  const { isModalOpen, handleOk, handleCancel, tableRecord } = props;
  const [disabled, setDisabled] = useState(false);
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });
  const draggleRef = useRef<HTMLDivElement>(null);

  const [form] = Form.useForm();

  // 开始拖拽回调
  const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };

  useEffect(() => {}, [tableRecord]);

  return (
    <Modal
      title={
        <div
          style={{
            width: '100%',
            cursor: 'move',
          }}
          onMouseOver={() => {
            if (disabled) {
              setDisabled(false);
            }
          }}
          onMouseOut={() => {
            setDisabled(true);
          }}
        >
          详情
        </div>
      }
      onOk={handleOk}
      onCancel={handleCancel}
      modalRender={(modal) => (
        <Draggable
          disabled={disabled}
          bounds={bounds}
          onStart={(event, uiData) => onStart(event, uiData)}
        >
          <div ref={draggleRef}>{modal}</div>
        </Draggable>
      )}
      open={isModalOpen}
      onCancel={handleCancel}
      width="800px"
    >
      <Descriptions
        size={'middle'}
        column={2}
        labelStyle={{ justifyContent: 'flex-end', minWidth: 100 }}
      >
        <Descriptions.Item label="偏好语言">{tableRecord.id}</Descriptions.Item>
        <Descriptions.Item label="是否绑定公众号">
          {tableRecord?.kehuhao}
        </Descriptions.Item>
        <Descriptions.Item label="用户账号">
          {tableRecord?.kehuhao}
        </Descriptions.Item>
        <Descriptions.Item label="用户姓名">
          {tableRecord?.kehuhao}
        </Descriptions.Item>
        <Descriptions.Item label="性别">
          {tableRecord?.kehuhao}
        </Descriptions.Item>
        <Descriptions.Item label="状态">
          {tableRecord?.kehuhao}
        </Descriptions.Item>
        <Descriptions.Item label="联系电话">
          {tableRecord?.kehuhao}
        </Descriptions.Item>
        <Descriptions.Item label="身份证">
          {tableRecord?.kehuhao}
        </Descriptions.Item>
        <Descriptions.Item label="备注">
          {tableRecord?.kehuhao}
        </Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};

export default OperationDetails;
